<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width , initial-scale=1.0">
    <title>资讯详情</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css">
    <link rel="stylesheet" href="../static/css/typo.css">
    <link rel="stylesheet" href="../static/css/prism.css">
</head>
<body>
<!--导航-->
<nav th:replace="_fragments :: menu(1)" class="ui  attached segment m-padded-tb-mini m-shadow-small">
<!--    <a type="hidden" id="point"></a>-->
    <div class="ui container">
        <div class="ui secondary stackable menu" content="">
            <!--            <h1 class="ui blue header item left floated huge">多安科技</h1>-->
            <div class="ui header item image huge left floated" style="font-size: 26px; color: #1296db" onclick="reload()">
                <img style="width: 70px;height: 70px;" src="../static/images/logo.jpg" alt="">多安科技
            </div>
            <a href="#" class=" m-mobile-hide item huge"><i class="home icon"></i>首页</a>
            <a href="#" class=" m-mobile-hide item huge"><i class="idea icon"></i>解决方案</a>
            <a href="#" class=" m-mobile-hide item huge"><i class="clone icon"></i>技术支持</a>
            <a href="#" class=" m-mobile-hide item huge"><i class="info icon"></i>关于多安</a>
            <a href="#" class=" m-mobile-hide item huge"><i class="bullhorn icon"></i>公司招聘</a>
        </div>
    </div>
</nav>
<!--中间部分-->
<div class="m-container-small m-padded-tb-big animated fadeIn">
    <div class="ui container" style="width: 842px;">
        <div class="ui attached segment">
<!--            图片区域-->
            <img class="ui fluid image" th:src="@{${blog.firstPic}}" style="width: 812px;height: 541px;" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1581050339857&di=30180e51c93afede044868a1e7b5de3c&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F30%2F20180130140345_3WY4v.jpeg" alt="">
        </div>
        <div class="ui attached m-padded-tb-big segment">
<!--            内容区域-->
            <h2 class="ui center aligned header" th:text="${blog.title}">一个h2大标题</h2>
            <br><br>
            <div id="content" style="padding: 20px 40px 20px 40px" class="m-padde-lr-responsive typo-selection js-toc-content m-text-thin m-text-space" th:utext="${blog.content}">
                <pre><code class="language-css">p { color: red }</code></pre>
                <h1 id="appdenfix1">大标题</h1>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <h2 id="appdenfix2">h2标题</h2>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <h3 id="appdenfix3">h3标题</h3>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <h4 id="appdenfix4">h4标题</h4>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <h5 id="appdenfix5">h5标题</h5>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
                <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
            </div>
        </div>
        <div class="ui attached segment">
            <div id="wechatQr" class="ui button basic orange">点击获取试用资格</div>
            <form class="ui form" id="form1" action="/admin/applytrial" method="post">
                <div id="shiyong" class="ui modal">
                    <i class="close icon"></i>
                    <div class="ui center aligned header">
                        <h3 class=" center aligned header">请填写您的信息以便工作人员为您提供试用服务</h3>
                    </div>
                    <div class="content">
                        <div style="width: 50%;height: auto;margin: 0 auto;">
                            <div class="ui divider"></div>
                            <div class="ui fluid icon input">
                                <input name="name" type="text" placeholder="姓名...">
                                <i class="name icon"></i>
                            </div>
                            <div class="ui divider"></div>
                            <div class="ui fluid icon input">
                                <input name="tele" type="text" placeholder="联系电话...手机号码最佳">
                                <i class="telephone icon"></i>
                            </div>
                            <div class="ui divider"></div>
                            <div class="ui fluid icon input">
                                <input name="comp" type="text" placeholder="单位名称...尽量写全称">
                                <i class="work icon"></i>
                            </div>
                            <div class="ui divider"></div>
                        </div>
                    </div>
                    <div class="actions">
                        <div class="ui label">您也可以选择添加微信的方式联系我们 <i class="icon right arrow"></i></div>
                        <div id="Code" class="ui right labeled icon button">
                            <i class="wechat icon"></i>
                            二维码
                        </div>
                        <div id="cancel" class="ui button">取消</div>
                        <button id="sub" class="ui button submit">提交</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div id="qrcode2" class="ui modal code">
        <div class="content flex-row">
            <img src="/images/hezuoQrcode.png">
            <img style="width: 363px;height: 488px;margin-left: 171px;" src="/images/myQR.jpg">
        </div>
    </div>
    <div id="basicmodal" class="ui modal">
        <div class="header">
            谢谢您填写的申请，我们会在随后联系您，请注意保持通话畅通
        </div>
    </div>
    <div id="errormodal" class="ui modal">
        <div class="header">
            请填写正确的信息！例如手机号是否输入了正确格式！
        </div>
    </div>
</div>
<br><br><br><br><br><br><br><br><br><br>
<!--                footer-->
<footer th:replace="_fragments :: footer" class="ui mobile vertical segment m-padded-tb-massive m-shadow-small-footer" style="background-color:#1296db;">
    <div class="ui center aligned container">
        <div class="ui  divided stackable grid">
            <div class="three wide column">
                <div class="ui column">
                    <img src="../static/images/gzhQRCode.jpg" style="width: 120px;height: 120px" alt="">
                </div>
            </div>
            <!--            <div class="three wide column">-->
            <!--                <h4 class="ui  header">联系方式</h4>-->
            <!--                <div class="ui  link list">-->
            <!--                    <a href="#" class="item">17370000889</a>-->
            <!--                    <a href="#" class="item">17370095889</a>-->
            <!--                    <a href="#" class="item">383414428@qq.com</a>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="three wide column">
                <h4 class="ui  header">联系方式</h4>
                <div class="ui  link list">
                    <a href="#" class="item">17370000889</a>
                    <a href="#" class="item">17370095889</a>
                    <a href="#" class="item">383414428@qq.com</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui  header">公司招聘</h4>
                <div class="ui  link list">
                    <p  class="m-text-space">

                    </p>
                </div>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin">copy right 1195498488</p>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
    <script src="../static/js/prism.js"></script>
<script th:inline="javascript">
    $('#wechatQr').click(function () {
        $('#shiyong').modal('show');
    });
    $('#Code').click(function () {
        $('#qrcode2').modal('show');
    })
    $('#cancel').click(function () {
        $('#shiyong').modal('hide');
    })
    $('#sub').click(function () {
        var name = $(" input[ name='name' ] ").val();
        var tele = $(" input[ name='tele' ] ").val();
        var comp = $(" input[ name='comp' ] ").val();
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;

        if (name == "" && name == null && tele == "" && !myreg.test(tele) && comp == "" && comp == null){
            $('#errormodal').modal('show');
        }else{
            $.ajax({
                url:"/admin/applytrial", //请求的url地址
                dataType:"json", //返回格式为json
                async:true,//请求是否异步，默认为异步，这也是ajax重要特性
                data:{
                    "name":name,
                    "tele":tele,
                    "comp":comp
                }, //参数值
                type:"GET", //请求方式
                success:function(req){
                    $('#basicmodal').modal('show');
                },
                error:function(e){
                    //请求出错处理
                    console.log(e)
                }
            });
        }
    })

</script>
</body>
</html>